<template>
  <ProfileLayout>
    <div class="bg-white rounded-2xl p-8 shadow-sm">
      <h2 class="text-2xl font-light text-gray-900 mb-6">个人信息</h2>
      
      <form @submit.prevent="updateProfile" class="space-y-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">姓名</label>
            <input
              v-model="form.name"
              type="text"
              class="w-full px-4 py-3 border border-gray-300 rounded-2xl shadow-sm focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
            />
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">邮箱</label>
            <div class="w-full px-4 py-3 bg-gray-100 border border-gray-300 rounded-2xl text-gray-500">
              {{ user?.email || '未设置邮箱' }}
            </div>
            <p class="text-xs text-gray-500 mt-1">邮箱不可更改</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">手机号</label>
            <div class="w-full px-4 py-3 bg-gray-100 border border-gray-300 rounded-2xl text-gray-500">
              {{ user?.phone || '未设置手机号' }}
            </div>
            <p class="text-xs text-gray-500 mt-1">手机号不可更改</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">生日</label>
            <input
              v-model="form.birthday"
              type="date"
              class="w-full px-4 py-3 border border-gray-300 rounded-2xl shadow-sm focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
            />
          </div>
        </div>
        
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">个人简介</label>
          <textarea
            v-model="form.bio"
            rows="4"
            class="w-full px-4 py-3 border border-gray-300 rounded-2xl shadow-sm focus:ring-2 focus:ring-gray-900 focus:border-gray-900 resize-none"
          ></textarea>
        </div>
        
        <button
          type="submit"
          :disabled="form.processing"
          class="px-6 py-3 bg-gray-900 text-white rounded-2xl font-medium hover:bg-gray-800 transition-colors disabled:opacity-50"
        >
          {{ form.processing ? '保存中...' : '保存更改' }}
        </button>
      </form>
    </div>
  </ProfileLayout>
</template>

<script setup>
import { computed } from 'vue'
import { usePage, useForm } from '@inertiajs/vue3'
import ProfileLayout from '@/Layouts/ProfileLayout.vue'

// 获取用户数据
const page = usePage()
const user = computed(() => page.props.auth.user)

// 表单
const form = useForm({
  name: user.value?.name || '',
  birthday: user.value?.birthday || '',
  bio: user.value?.bio || ''
})

// 更新个人信息
const updateProfile = () => {
  form.patch(route('profile.update'), {
    preserveScroll: true,
    onSuccess: () => {
      // 更新成功
    }
  })
}
</script>

